<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #slider {
            width: 600px;
            height: 500px;
            margin: 0 auto;
            border: 1px solid #56a5f1;
            position: relative;
            overflow: hidden;
        }

        .item {
            display: block;
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
            transition: left 0.7s ease-in-out;
        }

        /* 小圆点的统一样式 */
        .page-control {
            width: 10px;
            height: 10px;
            border: 1px solid #fff;
            border-radius: 50%;
            position: absolute;
            bottom: 20px;
            cursor: pointer;
        }
        /* 小箭头的统一样式 */
        .arrow {
            width: 50px;
            height: 50px;
            background-color: rgba(255, 255, 255, 0.2);
            position: absolute;
            top: 225px;
            z-index: 10;
            border-radius: 50%;
            cursor: pointer;
            background-image: url('./image/slide_next.png');
            background-position:-5px center ;
         }
         .arrow-right {
            right: 0px;
            background-image: url('./image/slide_next.png');
            background-position:-63px center ;
         }

    </style>
</head>

<body>
    <div id="slider">
        <img class="item" src="./image/111.jpg" alt="">
        <img class="item" src="./image/222.jpg" alt="">
        <img class="item" src="./image/333.jpg" alt="">
        <img class="item" src="./image/444.jpg" alt="">
        <img class="item" src="./image/111.jpg" alt="">
    </div>
    <p class="text">555</p>
    <script>
        //let text = document.querySelector('.text');可以获取class为text的标签，
        //text.style.color='red'
        //let slider = document.getElementById('slider');
        //初始化
        let sWidth = slider.clientWidth;
        let imgs = document.querySelectorAll('.item');

        //获取相同class并成数组
        for (let i = 0; i < imgs.length; i++) {
            imgs[i].style.left = `${i * sWidth}px`;//控制他的css
        }

        //显示当前序列号
        let page = 0;

        //计时器播放
        var timer = setInterval(function () {
            computed();
        }, 3000);

        //增加小圆点
        for (let i = 0; i < imgs.length - 1; i++) {
            let div = document.createElement('div');
            slider.appendChild(div);
            div.classList.add('page-control');
            div.style.left = (sWidth / 2 + i * 20) - ((imgs.length-1) * 10) / 2 - ((imgs.length - 2) * 10) / 2 + 'px';
        }

        //增加小箭头
        let leftArrow = document.createElement('div');
        slider.appendChild(leftArrow);
        leftArrow.classList.add('arrow');
        let rightArrow = document.createElement('div');
        slider.appendChild(rightArrow);
        rightArrow.classList.add('arrow');
        rightArrow.classList.add('arrow-right');

        //给小箭头增加事件监听
        leftArrow.onclick= function(){
            page--;
            if (page < 0) {
                page = 0
            }
            computed();
            clearTimer(timer);
            timer = setInterval(function(){
                computed();
            },3000);
        }
        rightArrow.onclick= function(){
            page++;
            if (page > imgs.length - 1) {
                page = imgs.length - 1
            }
            moveSlider();
            clearTimer(timer);
            timer = setInterval(function(){
                computed();
            },3000);
            computed();
        }
        //清除老的计时器
        function clearTimer(t){
            clearTimer(t);
        }
        //处理小圆点
        var pageControl = document.querySelectorAll('.page-control');
        for (let i = 0; i < pageControl.length; i++) {
            //给每一个div增加属性index
            pageControl[i].index = i;
            pageControl[i].onclick = function (e) {
                console.log(e.target.index);
                page = e.target.index;
                moveSlider();
            }

        }

        //播放,计算如何切算图片
        function computed() {
            page++;
            if (page > imgs.length - 1) {
                page = imgs.length - 1
            }
            moveSlider();
        }

        //播放图片
        function moveSlider() {
            for (let i = 0; i < imgs.length; i++) {
                imgs[i].style.left = `${(i - page) * sWidth}px`;//控制他的css

            }

            //最后一张时
            if (page == imgs.length - 1) {//缓速让他none，不僵硬，同0.7
                setTimeout(() => {
                    page = 0;
                    //播放到最后一张，所有图片复位
                    for (let i = 0; i < imgs.length; i++) {
                        imgs[i].style.transition = 'none';
                        imgs[i].style.left = `${i * sWidth}px`;//控制他的css
                    }
                    setTimeout(function () {
                        for (let i = 0; i < imgs.length; i++) {
                            imgs[i].style.transition = 'left 0.7s ease-in-out';
                        }
                    }, 100);
                }, 700);
            }
            setBgColor(page);
        }
        function setBgColor(num) {
            for (let index = 0; index < pageControl.length; index++) {
                pageControl[index].style.backgroundColor = '';
                if (num == 4) {
                    pageControl[0].style.backgroundColor = '#fff';
                } else {
                    pageControl[num].style.backgroundColor = '#fff';
                }
            }
        }
        setBgColor(0);
    </script>
</body>

</html>